<template>
    <div class="barrages-drop">
        <el-button @click="listOne">423424</el-button>
        <div style="width: 70%; margin-top: 70px">
            <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
        </div>
        <vue-baberrage
            :isShow="barrageIsShow"
            :barrageList="barrageList"
            :loop="barrageLoop"
            :throttleGap="throttleGap"
            :boxHeight="boxHeight"
            :box-width="boxWidth"
            :messageHeight="messageHeight"
            :lanes-count="lanesCount"
            style="border: 1px solid red; width: 60%; height: 400px"
        >
        </vue-baberrage>
    </div>
</template>

<script>
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
    name: 'novel',
    components: {},
    props: {},
    data() {
        return {
            idd: 8,
            timee: 8,
            msg: '~',
            barrageIsShow: true, //是否展示弹幕
            messageHeight: 3, //消息高度(测试不生效)
            barrageLoop: false, //是否循环播放
            maxWordCount: 2, //弹幕字数(测试不生效)
            lanesCount: 2, //固定弹幕(测试不生效)
            boxWidth: 800, //弹幕宽度
            boxHeight: 100, //弹幕高度(测试不生效)
            throttleGap: 500, //消息间隔
            barrageList: [], //弹幕列表，格式为数组
            playerOptions: {
                height: 400,
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                autoplay: false, // 如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: require('@/assets/mp4/1.mp4') // url地址
                    }
                ],
                poster: require('@/assets/logo.png'), // 你的封面地址
                // width: document.documentElement.clientWidth, //播放器宽度
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true // 全屏按钮
                }
            }
        }
    },
    created() {
        this.addToList()
    },
    methods: {
        addToList() {
            let list = [
                {
                    id: 1,
                    // avatar: 'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E5%A4%B4%E5%83%8F%20%E5%8D%A1%E9%80%9A&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=undefined&latest=undefined&copyright=undefined&cs=3530415969,1988873144&os=2239028074,3245943735&simid=4257281354,654224475&pn=0&rn=1&di=7117150749552803841&ln=1832&fr=&fmq=1389861203899_R&fm=&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&oriquery=%E5%A4%B4%E5%83%8F&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Finews.gtimg.com%252Fnewsapp_bt%252F0%252F13834062700%252F641%26refer%3Dhttp%253A%252F%252Finews.gtimg.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1664097728%26t%3Da11bf9266fa732dc78d876583bc96b9f&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwzLDEsNSwyLDcsOCw2LDQsOQ%3D%3D',
                    avatar: 'api/profile/avatar/2022/08/25/blob_20220825112413A001.jpeg',
                    msg: '人生若只如初见',
                    time: 4,
                    barrageStyle: 'red'
                },
                {
                    id: 2,
                    avatar: 'api/profile/avatar/2022/08/25/blob_20220825112413A001.jpeg',
                    msg: '何事秋风悲画扇',
                    time: 5,
                    barrageStyle: 'blue'
                },
                {
                    id: 3,
                    avatar: 'api/profile/avatar/2022/08/25/blob_20220825112413A001.jpeg',
                    msg: '等闲变却故人心',
                    time: 6,
                    barrageStyle: 'yellow'
                }
            ]
            list.forEach((v) => {
                this.barrageList.push({
                    id: v.id,
                    avatar: v.avatar,
                    msg: v.msg,
                    time: v.time,
                    type: MESSAGE_TYPE.NORMAL,
                    barrageStyle: v.barrageStyle
                })
            })
        },
        listOne() {
            this.barrageList.push({
                id: this.idd++,
                avatar: 'api/profile/avatar/2022/08/25/blob_20220825112413A001.jpeg',
                msg: 'test' + this.idd++,
                time: this.timee++,
                type: MESSAGE_TYPE.NORMAL,
                barrageStyle: 'blue'
                // extraWidth: 100
            })
        }
    }
}
</script>
<style lang="less">
//@top: ~`Math.random () * 15+15+'px' `;
/*.loop(@n) when (@n > 0) {
    .loop(@n - 1);
    li:nth-child(@{n}) {
        left: ~`Math.random() * 70+15+'px' `;
        top: 50%;
        transform: translate(-50%, -50%);
        @width: ~`Math.random() * 15+15+'px' `;
        width: @width;
        height: @width;
        @s: ~`Math.random() `;
        animation: moveToTop @s*6+3s ease-in-out @s*5000 / 1000s infinite;
    }
}*/
</style>
